<template>
  <div class="floorBox">

    <div style="padding-top: 0.5vh;width: 99%;margin: 0 auto;height: auto;color: white;font-size: 1.8vh;text-align: left;">
      <span style="float: left;margin-left: 1vh;border-left: 6px #409EFF solid;"><span style="margin-left: 1vh;">墙面信息</span></span>

      <div style="margin-top: 5vh;">
        <el-form ref="wallData"  :rules="wallRules"  label-width="120px" label-suffix	=":" align="left"  style="margin-top: 1.5vh;color: #FFFFFF;"  :inline="true" :model="wallData" >

          <el-form-item  label="名称" prop="wall_name">
            <el-input v-model="wallData.wall_name"></el-input>
          </el-form-item>

          <el-form-item  label="长度" prop="wall_length">
            <el-input v-model="wallData.wall_length">
              <i slot="suffix" style="font-style:normal;margin-right: 10px;">m</i>
            </el-input>
          </el-form-item>

          <el-form-item  label="高度" prop="wall_width">
            <el-input v-model="wallData.wall_width">
              <i slot="suffix" style="font-style:normal;margin-right: 10px;">m</i>
            </el-input>
          </el-form-item>

          <el-form-item  label="厚度" prop="wall_thick">
            <el-input v-model="wallData.wall_thick">
              <i slot="suffix" style="font-style:normal;margin-right: 10px;">m</i>
            </el-input>
          </el-form-item>

          <el-form-item  label="材质" prop="wall_structure">

            <el-select v-model="wallData.wall_structure" placeholder="">
              <el-option
                v-for="item in wallStructureOption"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>

          </el-form-item>


          <el-form-item  label="位置" prop="wall_location">
            <el-input v-model="wallData.wall_location">

            </el-input>
          </el-form-item>

          <el-form-item  label="墙面倾斜角度" prop="wall_angle">
            <el-input v-model="wallData.wall_angle">

            </el-input>
          </el-form-item>

        </el-form>


        <div id="windowDiv" style="width: 90%;margin: 0 auto;height: auto;">
          <windowTemplate ref="windowComponent" v-for='(windowData,index) in wallData.windowDataArrs' v-bind:key="index" :windowData="windowData" :index="index" @removeWindow="removeWindow" @cloneWindow="cloneWindow"></windowTemplate>
          <div style="width: 100%;height: 2vh;"></div>
        </div>


        <div style="width: 100%;height: 4vh;">
          <div style="float: right;  position: relative;">
            <el-button size="small" type="primary" icon="el-icon-circle-plus-outline" @click="createWindow">新建窗户</el-button>
            <el-button size="small" type="primary" icon="el-icon-connection" @click="cloneWall">复制墙面</el-button>
            <el-button size="small" type="danger" icon="el-icon-delete" @click="removeWall">删除墙面</el-button>
          </div>
        </div>

      </div>

    </div>


  </div>






</template>

<script>

  import windowTemplate from '../loadSimulation/windowTemplate'

  export default {
    name: 'wallTemplate',
    components: {
      windowTemplate
    },
    data() {
      return {

        wallStructureOption: [{
          value: '1',
          label: '混凝土'
        }, {
          value: '2',
          label: '玻璃'
        }, {
          value: '3',
          label: '石头'
        }],

        wallRules: {
          wall_name: [
            { required: true, message: '请输入墙面名称', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          wall_location: [
            { required: true, message: '请输入墙面位置', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          wall_thick: [
            { required: true, message: '请输入墙面厚度', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          wall_width: [
            { required: true, message: '请输入墙面高度', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          wall_length: [
            { required: true, message: '请输入墙面长度', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          wall_angle: [
            { required: true, message: '请输入墙面倾斜角度', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          wall_structure: [
            { required: true, message: '请输入墙面材质', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ]
        }
      }
    },
    props: {
      wallData : {
        wall_id : '',//墙面id
        wall_name : '', //墙面名称
        wall_location : '', //墙面位置
        wall_thick : '', //墙面厚度
        wall_width : '',//墙面高度
        wall_length : '',//长度
        wall_angle : '',//墙面倾斜角度
        wall_structure : '',//材质
        windowDataArrs:[

        ],
      },
      index : '',
    },
    mounted() {
      var code = "wallStructure";
      //初始化页面下拉
      this.$http.post("/iepsapi/fhfz/sceneSettings/retrievePageOption?code="+code, {}).then((res) => {
        var option = res.data;
        this.wallStructureOption = option;
      });
    },
    methods: {

      validateWall : function(){
        var flag;
        this.$refs['wallData'].validate((valid) => {
          flag = valid;
        });
        return flag;
      },

      cloneObj:function (obj) {
        var newObj = {};
        if (obj instanceof Array) {
          newObj = [];
        }
        for (var key in obj) {

          var isId = key.substring(key.length-"_id".length)=="_id";

          var val = obj[key];

          if(isId){
            val = '';
          }

          //newObj[key] = typeof val === 'object' ? arguments.callee(val) : val; //arguments.callee 在哪一个函数中运行，它就代表哪个函数, 一般用在匿名函数中。
          newObj[key] = typeof val === 'object' ? this.cloneObj(val): val;
        }
        return newObj;
      },
      /* 新建窗户 */
      createWindow : function(){
        var windowData = {
          window_id : '', //窗户id
          window_name : '', //窗户名称
          window_location : '', //窗户位置
          window_width : '', //窗户宽度
          window_lenght : '',//窗户高度
          window_area : '',//窗户面积
          window_thick : '',//窗户面积
          window_structure : '',//窗户材质
          wallIndex : this.index
        };
        this.wallData.windowDataArrs.push(windowData);
      },
      /* 复制墙面 */
      cloneWall : function(){
        this.$emit('cloneWall', this.index);
      },
      /*删除墙面*/
      removeWall : function(){
        this.$emit('removeWall', this.index);
      },
      /* 复制窗户 */
      cloneWindow : function(index){
        //根据子组件传递的index，在index后的位置，复制一个相同的窗户节点
        var windowData = this.wallData.windowDataArrs[index];
        var newWindowData = this.cloneObj(windowData);

        newWindowData.window_id = '';

        this.wallData.windowDataArrs.splice(index+1,0,newWindowData);
      },
      /* 删除窗户 */
      removeWindow : function(index){

        this.$confirm('是否确认删除该窗户信息！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',

          type: 'warning'
        }).then(() => {

          //根据子组件传递的index删除父组件当中的窗户数组当中的窗户数据
          var removeObj = this.wallData.windowDataArrs.splice(index,1);

          var window_id = removeObj[0].window_id;

          if(window_id!=null&&window_id!=""){

            this.$http.post("/iepsapi/fhfz/sceneSettings/deleteWindow?window_id="+window_id, {}).then((res) => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            })

          }else{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      },

    }
  }
</script>



<style scoped >

  .floorBox{
    width: 100%;
    margin-top: 1vh;
    background: inherit;
    background: #28377A;
    color: white;
    min-height: 24vh;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(81,101,205, 1);
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    font-size: 2vh;
    text-align: right;
  }

  .floorInfo{
    padding-top: 0.5vh;
    width: 99%;
    margin: 0 auto;
    height: 6vh;
    color: white;
    font-size: 1.8vh;
    text-align: left;
    float: left;
  }

  /deep/ .el-dialog, .el-pager li {
    background: #202B61;
    -webkit-box-sizing: border-box;
  }


  /deep/ .el-dialog__header {
    padding: 20px 20px 10px;
    color: #FFF;
    background: #374590;
  }

  /deep/ .el-dialog__title {
    line-height: 15px;
    font-size: 16px;
    color: #FFF;
  }

  /deep/ .el-input__inner {
    -webkit-appearance: none;
    background-color: #161E43;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #161E43;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #4891EE;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
  }


  /deep/ .el-input__inner {
    -webkit-appearance: none;
    background-color: #161E43;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #161E43;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #FFFFFF;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
  }

  /deep/ .el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #FFF !important;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }


  .box1{
    position: relative;
    width: 100%;
    background: inherit;
    background-color: rgba(45, 61, 136, 0.6);
    color: white;
    min-height: 45vh;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(226, 239, 249, 1);
    border : none;
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    font-size: 2vh;
    text-align: right;
  }

  .box2{
    position: relative;
    width: 100%;
    min-height: 25vh;
    margin-top:0.5%;
    background: inherit;
    background-color: rgba(45, 61, 136, 0.6);
    color: white;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(226, 239, 249, 1);
    border : none;
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    font-size: 2vh;
    text-align: right;
  }




  .title{
    width:100%;
    height:5vh;
    line-height: 5vh;
    background:rgba(55, 69, 144, 1);

    font-weight:bold;
    background: inherit;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-style: normal;
    font-size: 1.5vh;
    color: #FFFFFF;
    text-align: left;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(55, 69, 144, 1);
    border-radius: 1px;
    -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.345098039215686);
    -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.345098039215686);
  }


</style>
